import React from 'react';
import { Button, Space, Statistic, Tooltip } from 'antd';
import { ModalForm } from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { connect } from 'umi';
import styles from '@/pages/trade/Item/index.less';
import { EditOutlined, RollbackOutlined } from '@ant-design/icons';

const AuthCard = (props) => {
  const { dispatch, currentUser, item, responsive } = props;

  const onBuyFinish = () => {
    dispatch({
      type: 'item/addTrade',
      payload: {
        itemID: item.id,
        userID: currentUser.id,
        fromUserID: item.owner.id,
        toUserID: currentUser.id,
        price: item.price,
        type: 5,
      },
    });
    return true;
  };

  const onCancelFinish = () => {
    dispatch({
      type: 'item/addTrade',
      payload: {
        itemID: item.id,
        userID: currentUser.id,
        fromUserID: item.owner.id,
        toUserID: item.owner.id,
        price: item.price,
        type: 9,
      },
    });
    return true;
  };

  const buyForm = (
    <ModalForm
      title="购买授权"
      trigger={
        <Button size="large" type="primary">
          购买授权
        </Button>
      }
      onFinish={onBuyFinish}
    ></ModalForm>
  );

  const cancelForm = (
    <ModalForm
      title="取消交易"
      trigger={<Button size="large">取消交易</Button>}
      onFinish={onCancelFinish}
    ></ModalForm>
  );

  const ownerActions = [cancelForm];

  const buyerActions = [buyForm];

  const actions = item.owner.id === currentUser.id ? ownerActions : buyerActions;

  const authCard = (
    <ProCard.Group
      className={styles.itemCard}
      title="进行中的交易"
      headerBordered
      actions={actions}
      direction={responsive ? 'column' : 'row'}
    >
      <ProCard>
        <Statistic title="交易类型" value="授权" />
      </ProCard>
      <ProCard.Divider type={responsive ? 'horizontal' : 'vertical'} />
      <ProCard>
        <Statistic title="价格" value={item.price} />
      </ProCard>
    </ProCard.Group>
  );
  return item.status === 4 && authCard;
};

export default connect(({ item, user }) => ({
  currentUser: user.currentUser,
  item: item.item,
  responsive: item.responsive,
}))(AuthCard);
